<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            overflow: auto;
            background-color: #bfa;
            background-image: url("../01_introduce/img/img1.jpg");
            background-repeat: no-repeat;
            border:10px red double;
            background-position: 0 0;
            padding:10px;
            /* 
                设置背景的范围
                background-clip
                可选值:
                    border-box 默认值,背景会出现在边框的下边
                    padding-box背景不会出现在边框,只出现在内容区和内边距
                    content-box 背景智慧出现在内容区

                background-origin 背景图片的偏移量计算的圆点
                padding-box 默认值,background-position从内边距处开始计算
                content-box 背景图片的变量从边框出开始计算
            */
            /* background-origin:borfer-box; */
            /* background-clip: border-box; */

            /* 
                background-size 设置背景图片的大小
                    第一个值表示宽度
                    第二个值表示高度
                        -如果只写一个,则第二个值默认是auto
                    cover图片的比例不变,将元素铺满
                    contain 图片比例不变,将图片在元素中完整显示
            */
            background-size: auto 100%;
            background-size: contain;
            /* 
                background-color
                background-image
                background-repeat
                background-position
                background-size
                background-origin
                background-clip
                background-attachment
                -background 背景相关的简写属性，所有背景相关的样式都可以通过改样式来设置
                并且该样式没有顺序要求，也没有哪个属性是必须写的

                注意：
                background-size必须写在background-position的后边，并且使用/隔开
                background-position/background-size

                background-origin background-clip两个样式，origin要在clip的前边。

            */
        }
        .box2{
            width: 300px;
            height: 1000px;
            /* background-color: orange; */
            background-image: url(../01_introduce/img/img1.jpg);
            background-repeat: no-repeat;
            background-position: 100px 100px;
            /* 
                background-attachment
                -背景图片是否跟随元素移动
                -可选值:
                    scroll默认值背景图片会跟随元素移动
                    fixed背景会固定在页面中,不会随元素移动
            */
            background-attachment: fixed;
        }
        .box3{
            padding:20px;
            border:10px red solid;
            width: 500px;
            height: 500px;
            background: red url("../01_introduce/img/img1.jpg") center center no-repeat;
        }
    </style>
</head>
<body>
    
    <div class="box3">

    </div>
    <!-- <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nemo incidunt reiciendis perspiciatis mollitia ipsum, sed necessitatibus. Reiciendis, facere harum? Harum, molestiae cumque blanditiis tenetur placeat illo. Exercitationem, adipisci repellat!
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime assumenda, eligendi quod necessitatibus vel temporibus ipsam, voluptas quos sunt qui tempora, fugiat odit. Voluptatem eos facilis corrupti nostrum quod. Soluta.
        </div>
    </div> -->
</body>
</html>